<!--
 * @Author: Your Name you@example.com
 * @Date: 2023-01-05 16:22:37
 * @LastEditors: Your Name
 * @LastEditTime: 2023-02-05 13:20:21
 * @Description: file content
-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="微普科技 http://www.wiipu.com"/>
    <title>网页常见背景透明，文字不透明</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .zmkt {
            position: relative;
            width: 500px;
            height: 300px;
            background-color: rgba(255, 0, 0, .2);
        }
        .sub {
            width: 100%;
            text-align: center;
            display: block;
            position: absolute;
            top: 50%;
            transform: translate(0,-50%);
            background-color: #000;
            color: #fff;
            line-height: 50px;
        }

        /*完成如图所示样式，外层div宽500px,高300px,背景颜色为#f00，透明度为20%。内层div高50px,垂直居中，背景颜色#000，字体颜色#fff.*/
    </style>
</head>
<body>
<div class="zmkt">
    外层div背景透明，背景颜色为#f00，透明度为20%，
    <div class="sub">内层文字不透明,背景颜色为#000,字体颜色为#fff</div>
</div>
</body>
</html>
